<!-- 聊天输入组件 -->
<template>
	<div class="chat-input-area">
		<!-- 选中元素显示面板 -->
		<VisualEditorPanel
			v-if="canEdit"
			:selected-elements="selectedElements"
			@remove="removeSelectedElement"
			@clear="clearSelectedElements"
			@hover="handleElementHover"
		/>

		<div class="input-container">
			<a-textarea
				v-model:value="messageValue"
				:placeholder="canEdit ? '请输入您的需求或修改建议...' : '无法在别人的作品下对话哦~'"
				:rows="3"
				:disabled="!canEdit"
				@keydown="handleKeyDown"
				class="message-input"
				:class="{ 'disabled-input': !canEdit }"
			/>
			<div class="input-actions">
				<div class="input-left-actions">
					<!-- 可视化编辑按钮 -->
					<a-button
						v-if="canEdit && previewUrl"
						:type="isEditMode ? 'primary' : 'default'"
						size="small"
						@click="toggleEditMode"
						:disabled="generating"
						class="edit-mode-btn"
						:class="{ active: isEditMode }"
					>
						<template #icon>
							<EditOutlined />
						</template>
						{{ isEditMode ? '退出编辑' : '可视化编辑' }}
					</a-button>

					<!-- 导出对话历史按钮 -->
					<a-button
						v-if="showExportButton"
						type="default"
						size="small"
						@click="exportChatHistory"
						:loading="exportLoading"
						:disabled="messages.length === 0 || generating"
						class="export-btn"
					>
						<template #icon>
							<DownloadOutlined />
						</template>
						导出对话历史
					</a-button>
				</div>

				<div class="input-right-actions">
					<span class="char-count" v-if="canEdit">{{ messageValue.length }} 字符</span>
					<span class="input-tip" v-if="canEdit">Shift + Enter 换行</span>
					<span class="input-tip disabled-tip" v-else>无法在别人的作品下对话哦~</span>
					<a-button
						:type="generating ? 'primary' : 'primary'"
						:danger="generating"
						@click="handleSendOrStop"
						:loading="false"
						:disabled="generating ? false : !messageValue.trim() || !canEdit"
						class="send-btn"
						:class="{ 'stop-btn': generating }"
					>
						<template #icon>
							<StopOutlined v-if="generating" />
							<SendOutlined v-else />
						</template>
						{{ generating ? '停止生成' : '发送' }}
					</a-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { VisualEditorPanel } from '@/components/common'
import { EditOutlined, DownloadOutlined, SendOutlined, StopOutlined } from '@ant-design/icons-vue'

interface Props {
	canEdit: boolean
	previewUrl?: string
	isEditMode: boolean
	generating: boolean
	selectedElements: any[]
	messages: any[]
	exportLoading: boolean
	isAdmin: boolean
	modelValue: string
}

interface Emits {
	(e: 'update:modelValue', value: string): void
	(e: 'send'): void
	(e: 'stop'): void
	(e: 'toggleEditMode'): void
	(e: 'exportChatHistory'): void
	(e: 'removeSelectedElement', element: any): void
	(e: 'clearSelectedElements'): void
	(e: 'elementHover', element: any, isHover: boolean): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 双向绑定消息值
const messageValue = computed({
	get: () => props.modelValue,
	set: (value: string) => emit('update:modelValue', value),
})

// 是否显示导出按钮
const showExportButton = computed(() => {
	return props.messages.length > 1 && !props.generating && (props.canEdit || props.isAdmin)
})

// 处理键盘事件
const handleKeyDown = (event: KeyboardEvent) => {
	// Enter发送消息，Shift+Enter换行
	if (event.key === 'Enter' && !event.shiftKey) {
		event.preventDefault()
		handleSendOrStop()
	}
}

// 处理发送或停止
const handleSendOrStop = () => {
	if (props.generating) {
		emit('stop')
	} else {
		emit('send')
	}
}

// 切换编辑模式
const toggleEditMode = () => {
	emit('toggleEditMode')
}

// 导出对话历史
const exportChatHistory = () => {
	emit('exportChatHistory')
}

// 移除选中元素
const removeSelectedElement = (element: any) => {
	emit('removeSelectedElement', element)
}

// 清除选中元素
const clearSelectedElements = () => {
	emit('clearSelectedElements')
}

// 处理元素悬浮
const handleElementHover = (element: any, isHover: boolean) => {
	emit('elementHover', element, isHover)
}
</script>

<style scoped lang="scss">
.chat-input-area {
	border-top: 1px solid #e8e8e8;
	padding: 20px 24px;
	background: #fafafa;
	border-radius: 0 0 12px 12px;

	.input-container {
		.message-input {
			margin-bottom: 12px;

			:deep(.ant-input) {
				resize: none;
			}

			&.disabled-input {
				:deep(.ant-input) {
					background-color: #f5f5f5;
					cursor: not-allowed;
				}
			}
		}

		.input-actions {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 12px;
			margin-top: 8px;

			.input-left-actions {
				display: flex;
				align-items: center;
				gap: 8px;

				.edit-mode-btn,
				.export-btn {
					border-radius: 6px;
					transition: all 0.3s ease;
					height: 32px;
					padding: 0 12px;
					font-size: 13px;
					font-weight: 500;

					&:hover:not(:disabled) {
						transform: translateY(-1px);
						box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
					}

					&:disabled {
						opacity: 0.5;
						cursor: not-allowed;
					}
				}

				.edit-mode-btn {
					&.active {
						background: #1890ff;
						border-color: #1890ff;
						color: white;
						box-shadow: 0 2px 6px rgba(24, 144, 255, 0.3);
					}
				}

				.export-btn {
					border: 1px solid #d9d9d9;
					background: #fff;

					&:hover:not(:disabled) {
						border-color: #40a9ff;
						color: #40a9ff;
						box-shadow: 0 2px 8px rgba(64, 169, 255, 0.2);
					}
				}
			}

			.input-right-actions {
				display: flex;
				align-items: center;
				gap: 12px;
			}

			.input-tip {
				font-size: 12px;
				color: #999;

				&.disabled-tip {
					color: #ff4d4f;
					font-weight: 500;
				}
			}

			.char-count {
				font-size: 12px;
				color: #9ca3af;
				font-weight: 500;
			}

			.send-btn {
				transition: all 0.3s ease;

				&.stop-btn {
					background: #ff4d4f !important;
					border-color: #ff4d4f !important;

					&:hover {
						background: #ff7875 !important;
						border-color: #ff7875 !important;
						transform: translateY(-1px);
						box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
					}
				}
			}
		}
	}
}
</style>
